<template>
	<!-- 页面内容--登录页 -->
	<view style="width: 100vw; min-height: 100vh;background-color: #1F2022; color: #fff;
	background-image: url('../../static/headbg.png');
	background-repeat: no-repeat;
	background-size: 100% 30%;
	  display: flow-root;
	">
		<view class="P-head flexcentercloumn" :style="{
			marginTop: navigateHeight ? (navigateHeight + 200) + 'rpx' : '200rpx'
		}">
			<image src="../../static/logo.png" mode=""></image>
			<p style="margin: 20rpx 0 50rpx 0;">NeoLoan</p>
			<view class="P-3">
				{{$t('login.title')}}
			</view>
			<view class="P-4 flexrowstart">
				<image class="flagimg" v-if="currentlang=='es'" src="/static/lang/moxige.png" mode=""></image>
				<image class="flagimg" v-else src="/static/lang/taiguo.png" mode=""></image>
				<p v-if="currentlang=='es'">+ 52</p>
				<p v-else>+ 66</p>
				<image @click="openlangPopup" style="
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
				margin-top: 6rpx;
				" src="/static/ucentericon1.png" mode=""></image>
			</view>
			<view class="P-5">
				<input @blur="endTiming('phone')" @focus="startTiming('phone')" style="height: 100rpx;font-size: 32rpx"
					type="text" @input="changePhoneNum" v-model="from.phoneNum"
					:placeholder="$t('login.pleaseinputphonenum')" class="input" maxlength="10" inputmode="numeric" />
			</view>

			<view class="flexrowspacebetween" style="width: 100%; align-items: center; margin: 20rpx 0;">
				<!-- 		<view class="voicestyle" v-if="countTimes > 2" @click="fnSend('voice')" :disabled="from.isViceCounting">
					<p style="color: #BBA3F5">
						{{ from.isViceCounting ? `${$t('login.sendsmsagain')} (${from.voiceCountdown} S)` : $t('login.sendvoicecode') }}
					</p>
				</view>
				<view v-else></view> -->
				<view></view>
				<view class="sendbtn" @click="fnSend('sms')" :disabled="from.isSmsCounting">
					<view v-if="countTimes >= 1">
						{{ from.isSmsCounting ? `${$t('login.sendsmsagain')} (${from.smsCountdown} S)` : $t('login.sendsmsagain') }}
					</view>
					<view v-else>
						{{ from.isSmsCounting ? `${$t('login.sendsmsagain')} (${from.smsCountdown} S)` : $t('login.sendsms') }}
					</view>
				</view>
			</view>
			<view class="P-5">
				<uni-easyinput style="height: 100rpx;" @blur="endTiming('code')" @focus="startTiming('code')"
					:placeholder="$t('login.pleaseinputcodenum')" @iconClick="iconClick()" maxlength="4" type="number"
					:clearable="false" v-model="from.verificationCodeNum"></uni-easyinput>
			</view>

			<view @click="fn1()" class="P-2 flexcenter">
				<p>{{$t('login.register')}}</p>
			</view>
			<view class="P-1">
				<view class="content-1 flexrowspacebetween">
					<image src="../../static/locked.png" mode=""></image>
					<p>
						{{$t('index.pctips')}}
					</p>
				</view>
			</view>
		</view>
		<view>
		</view>
		<uni-popup ref="langpopup" type="center" :animation="false" :is-mask-click="false">
			<view class="langpopup">
				<p class="header">{{$t('index.Selectlanguage')}}</p>
				<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">

					<view class="flexrowstart">
						<view class="text" style="padding: 30rpx;">{{item.text}}
							{{item.code}}
						</view>
						<image v-if="item.code == 'es'" style="width: 100rpx; height: 60rpx;"
							src="../../static/lang/moxige.png" mode=""></image>
						<image v-if="item.code == 'th'" style="width: 100rpx; height: 60rpx;"
							src="../../static/lang/taiguo.png"></image>
					</view>
					<image v-if="item.code == currentlang" style="width: 60rpx; height: 60rpx;"
						src="../../static/lang/bigchoose.png" mode="">
					</image>
					<image v-else style="width: 60rpx; height: 60rpx;" src="../../static/lang/bigchoosed.png" mode="">
					</image>
				</view>
				<view v-if="langCode=='es'" class="header flexrowspacearound">
					<p @click="confirmsetlang" class="btn">Confirmar</p>
					<p @click="cancelsetlang" class="btn">Cancelar</p>
				</view>
				<view v-else class="header flexrowspacearound">
					<p @click="confirmsetlang" class="btn">ยืนยัน</p>
					<p @click="cancelsetlang" class="btn">ยกเลิก</p>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="pcpopup" type="center" :animation="false" :is-mask-click="false">
			<view style="width: 100vw;margin-bottom: 30px;" class="flexcenter">
				<view class="pcview">
					<view class="box1">
						<p class="one">{{$t('pc.title')}}</p>
						<br />
						<p>{{$t('pc.headone')}}</p>
						<p>{{$t('pc.headtwo')}}</p>
						<br />
						<p>{{$t('pc.smstitle')}}</p>
						<p>{{$t('pc.smsdesc')}}</p>
						<br />
						<p>{{$t('pc.EquipmentInfotitle')}}</p>
						<p>{{$t('pc.EquipmentInfodesc')}}</p>
						<br />
						<p>{{$t('pc.Cameratitle')}}</p>
						<p>{{$t('pc.Cameradesc')}}</p>
						<br />
						<p>{{$t('pc.applisttitle')}}</p>
						<p>{{$t('pc.applistdesc')}}</p>
						<br />
						<p>{{$t('pc.appinteraction')}}</p>
						<p>{{$t('pc.appinteractiondesc')}}</p>
						<br />
						<view class="box2">
							<p @click="pccancel()">{{$t('index.cancel')}}</p>
							<p @click="pccomfirm()">{{$t('index.confirm')}}</p>
						</view>
					</view>
				</view>
		
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		requestAndroidPermission
	} from '../../js_sdk/wa-permission/permission.js';
	import api from '@/pages/utils/api.js';
	import setDot from '@/pages/utils/setdot.js';
	import setfengkongDot from '@/pages/utils/fengkong.js';
	export default {
		data() {
			return {
				from: {
					phoneNum: '',
					styles: {
						color: '#2979FF',
						borderColor: '#2979FF'
					},
					isSmsCounting: false,
					smsCountdown: 60, //线上60
					isViceCounting: false,
					voiceCountdown: 60,

					verificationCodeNum: '',
					login: '',
				},
				currentlang: 'th',
				langCode: '',
				startTimes: {}, // 记录每个输入框的开始时间
				fillTimes: {
					// 存储填写时长
					phone: 0,
					code: 0,
					page: 0
				},
				countTimes: 0, //Count times
				// countTimes: 4, //Count times


				navigateHeight: '',
			};
		},
		created() {
			this.navigateHeight = uni.getStorageSync('navigateHeight') || ""
		},
		mounted() {
			if (uni.getStorageSync("isShowPc")) {
			} else {
				this.$refs.pcpopup.open('bottom')
			
			}
		},
		computed: {
			locales() {
				return [{
						text: this.$t('locale.es'),
						code: 'es'
					},
					{
						text: this.$t('locale.th'),
						code: 'th'
					},
				]
			}
		},
		onShow() {
			this.startTiming('page');
			console.log('当前app设置的语言--->>>', uni.getLocale());
			this.currentlang = uni.getLocale()
			this.langCode = uni.getLocale()
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			return true;
		},
		watch: {
			'from.phoneNum': function(newVal) {
				let value = newVal.toString();
				value = value.replace(/[^0-9]/g, '');
				if (value.length > 0 && value.charAt(0) !== '0') {
					value = '0' + value;
				}
				if (value.length > 10) {
					value = value.slice(0, 10);
				}

				if (value !== this.from.phoneNum) {
					this.$nextTick(() => {
						this.$set(this.from, 'phoneNum', value);
					});
				}
			}
		},
		methods: {
			pccomfirm() {
				this.$refs.pcpopup.close()
				uni.setStorageSync("isShowPc", true)
				this.getPermissions()
			},
			getPermissions() {
				console.log('点击了');
				// #ifdef APP-PLUS
				requestAndroidPermission('android.permission.CAMERA')
				requestAndroidPermission('android.permission.READ_SMS')
				// #endif
			},
			pccancel() {
				this.$refs.pcpopup.close()
				uni.setStorageSync("isShowPc", true)
				// 在你的页面中，当用户点击登录时，跳转到 Line 授权页面
				// console.log('点击了');
				// const lineLoginUrl = 'https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=你的client_id&redirect_uri=你的redirect_uri&state=随机生成的state值&scope=profile%20openid';
				// uni.navigateTo({
				//   url: 'https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=你的client_id&redirect_uri=你的redirect_uri&state=随机生成的state值&scope=profile%20openid'
				// });
			},
			cancelsetlang() {
				this.currentlang = uni.getLocale()
				this.$refs.langpopup.close()
			},
			confirmsetlang() {
				console.log('确认设置的语言', this.langCode);
				if (uni.getSystemInfoSync().platform.toLowerCase() === 'android') {
					this.setAppLocale(this.langCode);
					this.currentlang = this.langCode;
					this.$refs.langpopup.close()
				} else {
					this.setAppLocale(this.langCode);
				}
			},
			openlangPopup() {
				this.langCode = this.currentlang
				this.$refs.langpopup.open('bottom');
			},
			onLocaleChange(item) {
				this.langCode = item.code;
				this.currentlang = this.langCode;
				console.log('用户选择语言:', this.langCode);
			},
			setAppLocale(langCode) {
				uni.setLocale(langCode);
				this.$i18n.locale = langCode;
				this.currentlang = langCode;

			},
			// 开始计时
			startTiming(field) {
				this.startTimes[field] = Date.now();
			},
			// 结束计时并计算时长
			endTiming(field) {
				if (this.startTimes[field]) {
					const endTime = Date.now();
					// this.fillTimes[field] = ((endTime - this.startTimes[field]) / 1000).toFixed(2);
					this.fillTimes[field] = endTime - this.startTimes[field];
					this.startTimes[field] = null; // 重置
				}
			},
			iconClick() {
				this.from.verificationCodeNum = '';
			},
			focusInput(event) {
				console.log('focusInputevent', event);
			},
			changePhoneNum(event) {
				// let value = event.detail.value; // 确保是字符串
				// value = value.replace(/[^0-9]/g, ''); // 只保留数字
				// this.$nextTick(() => {
				// 	this.$set(this.from, 'phoneNum', value);
				// })
				// console.log('气死了》', this.from.phoneNum);
			},
			handleInput(event) {
				console.log('event', event);
				// if (event.length >= 10) {
				// 	this.from.phoneNum = event.slice(0, 10);
				// }
				let value = event; // 确保是字符串
				value = value.replace(/[^0-9]/g, ''); // 只保留数字
				this.from.phoneNum = value;
			},

			fn1() {
				console.log('验证码', this.from.verificationCodeNum, '填写时长', this.fillTimes.code);
				console.log('号码', this.from.phoneNum, '填写时长', this.fillTimes.phone);
				if (this.from.verificationCodeNum.length == 4 && this.from.phoneNum.length == 10) {
					console.log('可以发请求了');
					setDot('CLICK_LOGIN_SUBMIT');
					api.getLogin({
						jfah: this.from.phoneNum,
						tith: this.from.verificationCodeNum,
						adjust: uni.getStorageSync('adjustData'),
						spas: 'Android'
					}).then((data) => {
						console.log('登录结果res', data);
						//data.dvwc //0新 1老
						if (data.dvwc == 1) {
							uni.removeStorageSync('newUser');
							setDot('SYSTEM_LOGIN_SUCCESS');
						} else {
							uni.setStorageSync('newUser', 'newUser');
							setDot('SYSTEM_REGISTER_SUCCESS');
						}
						uni.setStorageSync('phoneNo', this.from.phoneNum);
						uni.setStorageSync('token', data.nxbd);
						uni.setStorageSync('userId', data.jvjj);
						setfengkongDot('PhoneTextCompleteDuration', this.fillTimes.phone);
						setfengkongDot('SmsCodeTextCompleteDuration', this.fillTimes.code);
						this.endTiming('page');
						console.log('页面停留时长', this.fillTimes.page);
						setfengkongDot('AddPageStopDurationALL', this.fillTimes.page);
						console.log('填写总时长', Number(this.fillTimes.phone) + Number(this.fillTimes.code));
						setfengkongDot('AddPageCompleteDurationALL', Number(this.fillTimes.phone) + Number(this
							.fillTimes.code));
						uni.switchTab({
							url: '/pages/demo2/demo2'
						});
					});
				} else {
					uni.showToast({
						title: this.$t('login.errormsgone'),
						icon: 'none',
						duration: 2000
					});
				}
			},
			fnSend(channel) {
				console.log('this.from.phoneNum.length ', this.from.phoneNum.length);
				this.from.login = '666';
				if (this.from.phoneNum.length != 10) {
					uni.showToast({
						icon: 'none',
						title: this.$t('login.errormsgtwo'),
						duration: 2000
					});
					return;
				}

				if (channel == 'sms') {
					if (this.from.isSmsCounting) {
						return;
					}
					this.from.isSmsCounting = true;
					this.from.smsCountdown = 60; //重新计时
					api.getCode({
						jfah: this.from.phoneNum
					}).then((data) => {
						console.log('短信验证码res', data);
						setDot('CLICK_LOGIN_CODE_SUCCESS');
						this.from.verificationCodeNum = data.tith;
						this.countTimes++;
					});
					const smsCountdownTimer = () => {
						if (this.from.smsCountdown <= 0) {
							this.from.isSmsCounting = false;
							return;
						}
						this.from.smsCountdown--;
						setTimeout(smsCountdownTimer, 1000);
					};
					smsCountdownTimer();
				} else {
					if (this.from.isViceCounting) {
						return;
					}
					this.from.isViceCounting = true;
					this.from.voiceCountdown = 60; //重新计时
					api.getVoiceCode({
						jfah: this.from.phoneNum
					}).then((data) => {
						console.log('语音验证码res', data);
						setDot('CLICK_LOGIN_CODE_SUCCESS');
						this.from.verificationCodeNum = data.tith;
					});
					const VoiceCountdownTimer = () => {
						if (this.from.voiceCountdown <= 0) {
							this.from.isViceCounting = false;
							return;
						}
						this.from.voiceCountdown--;
						setTimeout(VoiceCountdownTimer, 1000);
					};
					VoiceCountdownTimer();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.pcview {
		background-color: #FEF9E2;
		width: 90vw;
		height: 80vh;
		padding: 20rpx;
		border-radius: 30rpx;
		position: relative;
		overflow-x: hidden;
		box-sizing: border-box;
		color: #000;
	
		.box1 {
			height: calc(100% - 170rpx);
			// width: 100%;
			box-sizing: border-box;
			overflow-y: scroll;
			font-size: 28rpx;
			overflow-x: hidden;
	
			.one {
				width: 100%;
				text-align: center;
	
			}
		}
	
		.box2 {
			height: 170rpx;
			width: 100%;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 0 0 30rpx 30rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.2);
	
			p {
				font-size: 36rpx;
				width: 40%;
				text-align: center;
				background-color: #FFF584;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 30rpx;
				transition: transform 0.1s, background-color 0.2s;
			}
	
			p:active {
				background-color: #e6dc4f;
				transform: scale(0.95);
				/* 点击时轻微缩小 */
			}
	
			p:nth-of-type(1) {
				background-color: #D8D8D8;
				color: #FFFFFF;
			}
		}
	}
	
	.P-5 {
		width: 100%;
		background-image: url('/static/inputborder.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 6rpx 20rpx;
		box-sizing: border-box;
	}

	.P-4 {
		width: 100%;
		margin-bottom: 20rpx;

		.flagimg {
			width: 70rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}

	.P-3 {
		width: 100%;
		text-align: center;
		color: #CC9AF3;
		background-image: url('../../static/tipsbg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 110rpx;
		line-height: 110rpx;
		font-size: 34rpx;
		margin-bottom: 50rpx;
	}

	.P-head {
		width: 100%;
		background-color: #1F2022;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 200rpx;


		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexrowspacearound {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.flexcentercloumn {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.P-2 {
		width: 100%;
		margin: 20rpx 0rpx;

		p {
			width: 86%;
			height: 100rpx;
			background-color: #FFF584;
			text-align: center;
			color: #000;
			line-height: 100rpx;
			border-radius: 20rpx;
			font-size: 40rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;

		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}


	}

	::v-deep .uni-input-input {
		font-size: 16px !important;
	}

	::v-deep .uni-input-placeholder {
		color: #999 !important;
		font-size: 16px !important;
	}

	.w {
		width: 95%;
		height: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;
		background-color: #fff;
	}

	.sendbtn {
		min-width: 40%;
		height: 38px;
		text-align: center;
		line-height: 38px;
		background-color: #BBA3F5;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		transition: transform 0.1s ease, box-shadow 0.1s ease;
		padding: 0rpx 10rpx;
		font-size: 30rpx;
	}

	.sendbtn:active {
		/* 点击时稍微缩小并降低阴影 */
		transform: scale(0.96);
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
	}

	.voicestyle {
		font-size: 30rpx;
		min-width: 40%;
	}


	.P-1 {
		background-color: #393A3D;
		padding: 20rpx 30rpx;
		border-radius: 30rpx;
		font-size: 28rpx;

		.content-2 {
			box-sizing: border-box;
			color: #9C9C9C;

			.linkstyle {
				margin-left: 20rpx;
				color: #9F84DB !important;
			}

			image {
				width: 43rpx;
				height: 43rpx;
			}

			p {
				width: 90%;
			}
		}

		.content-1 {
			box-sizing: border-box;
			color: #B1FBDF;

			image {
				width: 43rpx;
				height: 50rpx;
			}

			p {
				width: 90%;
			}

		}
	}

	.langpopup {
		width: 100vw;
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		color: #333;
		background-color: #ffffff;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

		.header {
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 30rpx;
			color: #222;

			.btn {
				background: linear-gradient(to right, #7F7FD5, #86A8E7);
				width: 180rpx;
				color: #fff;
				padding: 16rpx 30rpx;
				border-radius: 50rpx;
				transition: all 0.2s;
				text-align: center;
				margin: 0 auto;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				margin-top: 30rpx;
			}

			.btn:active {
				transform: scale(0.95);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
			}
		}

		.locale-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;

			.text {
				font-size: 28rpx;
				color: #555;
				width: 160rpx;
			}
		}

		.locale-item:last-child {
			border-bottom: none;
		}
	}
</style>